<template>
   <div class="search">
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @input="search1"
    @click='show'
   />
   </form>
<div class="zj1" v-if="isshow">
   <div class="hot">历史记录</div>
   <div class="bg">
   <div class="hot1" v-for="item in history" :key="item.id">
     <div class="hot3">{{item.keyword}}</div>   
   </div>
   </div>
   <div class="hot">热门搜索</div>
   <div class="hot1" v-for="item in hot" :key="item.id">
     <div class="hot2" v-if="item.is_hot">{{item.keyword}}</div>
     <div class="hot3" v-else>{{item.keyword}}</div>
   </div>
</div>
<div class="zj2" v-if="isshow1">
  <div v-for="item in matchGoods" :key="item.id">
    <div class="name1" @click="name11(item.name)">{{item.name}}</div>
  </div>
</div>
<div class="zj3" v-if="isshow2">
  <div class="fl">
    <div>综合</div>
    <div>价格</div>
    <div>排序</div>
  </div>
  <div class="sp" v-for="item in matchGoods" :key="item.id">
    <div class="sp1"><img :src="item.list_pic_url"></div>
    <div class="sp2">{{item.name}}</div>
    <div class="sp3">￥{{item.retail_price}}</div>
  </div>
</div>
   </div>
</template>

<script>
import {a,b} from '@/api/home/search/index.js'
export default {
    data() {
    return {
      value: '',
      hot:'',
      history:'',
      matchGoods: [],
      isshow:true,
      isshow1:false,
      isshow2:false,
       };
    },
    methods: {
    onClickLeft() {
        this.$router.go(-1)
    },
    search1(){
    b({
      order:"asc",
      keyword:this.value
      })
      .then(res=>{
        this.matchGoods = res.keywords;
        console.log('查询结果',this.matchGoods);
      })
      },
    show(){
      this.isshow = false,
      this.isshow1 = true
    },
    // focus1(){
    //   this.isshow=!this.isshow
    // },
    // focus2(){
    //   this.isshow=!this.isshow
    //   this.isshow1=!this.isshwo1
    // },
    name11(name){
      this.value=name
      this.isshow1 = false
      this.isshow2 = true
    }
    },
    created(){
      a({
        openId:'oQmbb4sNZdxaUQZ0sfYgvtOP2S7c'
      })
      .then(res=>{
        console.log(res)
        this.hot=res.hotKeywordList
        this.history=res.historyData
      })
    },
}
</script>

<style lang="scss"> 
.search {
  width: 100%;
  .hot{
  width: 355px;
  height: 20px;
  text-align: left;
  margin: 0 auto;
}
.hot1{
  float: left;
  margin-left: 30px;
  margin-top: 15px;
}
.hot2{
  color:#B4282D;
  border:1px solid #B4282D;
  padding:5px
}
.hot3{
  border: 1px solid black;
  padding: 5px;
}
.bg{
  width: 355px;
  height: 100px;
  margin: 0 auto;
}
.name1{
  width: 355px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  text-align: left;
}
.fl{
  width: 355px;
  height: 30px;
  margin: 0 auto;
}
.fl div{
  width: 33%;
  float: left;
}
.sp{
  width: 176px;
  height: 210px;
  float: left;
  .sp1 img{
    width: 151px;
    height: 151px;
  }
  .sp3{
    color: #B4282D;
    margin-top: 10px;
  }
}
}




</style>